<!DOCTYPE HTML>
<html>
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <title>享点阅读(个人中心)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- 设置初始缩放比例为1.0，使用设备宽度  -->
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <!-- 在iOS下开启全屏模式  -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- 隐藏 Sarafi 状态栏  -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link href="/public/img/images/icon/xd.ico" rel="shortcut icon" />
        <link href="/public/css/comment/wapReset.css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="/public/css/comment/header_top.css">
        <link rel="stylesheet" type="text/css" href="/public/css/LArea.css">
        <link rel="stylesheet" type="text/css" href="/public/css/personal.css">
        <!-- 年龄滑动 -->
        <link rel="stylesheet" href="/public/css/lCalendar.css">
        <link rel="stylesheet" type="text/css" href="/public/css/comment/messageInfo.css">
        <script src="/public/js/rem/rem.js"></script>
    </head>
    <body scroll="no">
        <header>
            <div class="down_app return_back">
                <img src="/public/img/images/tabbar-back.png">
            </div>
            <div class="logo">
                个人中心
            </div>
        </header>
        <div class="personal_title">
            <div id="imagePreview">
                <img id="img1" src="<?php echo $data['user_img_url'];?>">
                <input id="imageInput" type="file" name="imageInput" accept="image/png,image/jpeg,image/gif,image/jpg">
            </div>

            <span><?php echo $data['user_nickname'];?></span>
            <input type="button" value="编 辑">
        </div>
        <ul class="personal_list">
            <a href="myBookcase?type=2"><li>最近阅读<img src="/public/img/images/btn-turnRight.png"></li></a>
            <a href="myBookcase?type=1"><li>我的书架<img src="/public/img/images/btn-turnRight.png"></li></a>
            <a href="myAccount"><li class="personal_money">我的金币 <img src="/public/img/images/btn-turnRight.png"><span><?php echo intval($data['user_balance']);?>阅币</span></li></a>
        </ul>
        <ul class="personal_list">
            <li class="personal_sex">性别<img src="/public/img/images/btn-turnRight.png"><span><?php echo $data['user_sex'] == 0 ? '点击设置' : $data['user_sex'] == 1 ? 男 : 女;?></span></li>
            <li class="personal_age">年龄<img src="/public/img/images/btn-turnRight.png"><input id="demo3" type="text" value="<?php echo $data['user_age'] > 0 ? $data['user_age'] : '点击设置';?>" readonly /></li>
            <li class="personal_address content-block">所在地区 <img src="/public/img/images/btn-turnRight.png"><input id="demo1" type="text" value="<?php echo $data['address'] != '' ? $data['address'] : '点击设置';?>" readonly /><input id="value1" type="hidden" value="20,234,504"/></li>
            <li class="changePassword">修改密码<img src="/public/img/images/btn-turnRight.png"><span>点击设置</span></li>
        </ul>
        <button class="exit">退出登录</button>
        <div class="change_message">
            <!-- 修改昵称 -->
            <div class="change_nickname slideInUp">
                <h2>
                    <div>取消</div>
                    <div>修改</div>
                </h2>
                <input type="text" name="nickname" placeholder="请输入2-10个汉字，数字或字母" value="<?php echo $data['user_nickname'];?>">
            </div>
            <!-- 修改性别 -->
            <div class="change_sex slideInUp">
                <h2>
                    <div>取消</div>
                    <div>确认</div>
                </h2>
                <div>
                    <span check="false" date-init="男">
                        <a href="javascript:;"></a>  <span>男</span>
                    </span>
                    <span check="false" date-init="女">
                        <a href="javascript:;"></a> <span>女</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="message_info_alert">
            <span>修改成功</span>
        </div>
    </body>
    <script type="text/javascript" src="/public/js/jquery1.7.2.js"></script>
    <script type="text/javascript" src="/public/js/header.js"></script>
    <script type="text/javascript" src="/public/js/LArea.js"></script>
    <script type="text/javascript" src="/public/js/LAreaData1.js"></script>
    <script type="text/javascript" src="/public/js/personal.js"></script>
    <!-- 年龄滑动 -->
    <script src="/public/js/lCalendar.js"></script>
    <script type="text/javascript" src="/public/js/ajaxfileupload.js"></script>
    <script type="text/javascript">
    //age
        var calendartime = new lCalendar();
        calendartime.init({
            'trigger': '#demo3',
            'type': 'time'
        });

    </script> 

    <script type="text/javascript" src="/public/js/comment.js"></script>
    <script type="text/javascript">
        $("#imageInput").on("change", function () {
            if ($("#imageInput").val().length > 0) {
                ajaxFileUpload();
            } else {
                $(".message_info_alert>span").html("请选择图片");
                $(".message_info_alert").fadeIn(function () {
                    setTimeout(function () {
                        $(".message_info_alert").fadeOut()
                    }, 300)
                })
            }
        })

        function ajaxFileUpload() {
            $.ajaxFileUpload
                    (
                            {
                                url: '/novel/image/upload', //用于文件上传的服务器端请求地址
                                secureuri: false, //一般设置为false
                                fileElementId: 'imageInput', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                                dataType: 'json', //返回值类型 一般设置为json
                                success: function (data, status)  //服务器成功响应处理函数
                                {
                                    if (data.error == '0') {
                                        $("#img1").attr("src", data.url);
                                    }
                                    $(".message_info_alert>span").html(data.msg);
                                    $(".message_info_alert").fadeIn(function () {
                                        setTimeout(function () {
                                            $(".message_info_alert").fadeOut()
                                        }, 300)
                                    })
                                },
                                error: function (data, status, e)//服务器响应失败处理函数
                                {
                                    $(".message_info_alert>span").html("系统繁忙请稍后再试");
                                    $(".message_info_alert").fadeIn(function () {
                                        setTimeout(function () {
                                            $(".message_info_alert").fadeOut()
                                        }, 300)
                                    })
                                }
                            }
                    )
            return false;
        }

    </script>
</html>